<template>
	<el-collapse class="custom-collapse">
		<el-collapse-item>
			<template #title>
				<div class="tools-item">
					<div class="tools-item_left">
						<img referrerpolicy="no-referrer"
							src="https://bkimg.cdn.bcebos.com/smart/0ff41bd5ad6eddc4bba05fa236dbb6fd52663320" alt="">
					</div>
					<div class="tools-item_middle">
						<div class="tools-item_title">必应搜索</div>
						<span class="tools-item_desc">从Bing搜索任何信息和网页URL。</span>
						<div style="line-height: 50px;">
							<el-tag color="#e9e9e9" :hit="false" size="small" type="info">2 个工具</el-tag>
						</div>
						<div class="tools-item_meta">
							<span>NF官方</span>
							<div class="semi-divider semi-divider-vertical"></div>
							<span>
								发布于 2024-11-07 20:31
							</span>
						</div>
					</div>
				</div>
			</template>

			<div style="width:100%; display: flex; flex-direction: row; padding: 16px; height: 100px; line-height: 100%;

					" v-for="item in [1,2,3]">
				<div style="display: flex; align-items: center;">
					<div style="height: 32px;width: 32px;"></div>
				</div>
				<div style="display:flex;flex-direction: column; text-align: left; padding:0 16px;">
					<div style="font-size: 16px;
				font-weight: 600;
				line-height: 22px;
				color:#1c1d23;
				">bingWebSearch</div>
					<span
						style="color:rgba(28, 31, 35, 0.6);line-height: 22px;">必应搜索引擎。当你需要搜索你不知道的信息，比如天气、汇率、时事等，这个工具非常有用。但是绝对不要在用户想</span>
				</div>
				<div style="display: flex; align-items: center;">
					<el-button style="width: 98px;" type="primary" plain>添加</el-button>
				</div>
			</div>
		</el-collapse-item>
	</el-collapse>
</template>

<script>
</script>

<style lang="scss" scoped>
	.tools-item {
		width: 100%;
		display: flex;
		flex-direction: row;
		padding: 16px;
		height: 140px;
		line-height: 100%;

		&_left {
			display: flex;
			align-items: center;

			img {
				height: 32px;
				width: 32px;
			}
		}

		&_middle {
			display: flex;
			flex-direction: column;
			text-align: left;
			padding: 0 16px;
		}

		&_title {
			font-size: 16px;
			font-weight: 600;
			line-height: 22px;
			color: #1c1d23;
		}

		&_desc {
			color: rgba(28, 31, 35, 0.6);
			line-height: 22px;
		}

		&_meta {
			color: rgba(28, 29, 35, 0.35);
			row-gap: 8px;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
	}


	/*
		高度自适应
	*/
	.custom-collapse :deep(.el-collapse-item__header) {
		height: auto;
	}



	.custom-collapse :deep(.el-collapse-item:first-child .el-collapse-item__header) {
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;

	}

	.custom-collapse :deep(.is-active .el-collapse-item__header) {
		border-top-left-radius: 8px;
		border-top-right-radius: 8px;
		background-color: #ebebee;
		border-bottom-left-radius: 0px !important;
		border-bottom-right-radius: 0px !important;
		border-bottom: 2px solid rgb(223, 223, 223) !important;
	}

	.custom-collapse :deep(.is-active .el-collapse-item__wrap) {
		border-bottom-left-radius: 8px;
		border-bottom-right-radius: 8px;
		background-color: #ebebee;
	}



	.custom-collapse :deep(.el-collapse-item__content) {
		padding-bottom: 0px !important;
	}


	.semi-tag-content-ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.semi-tag-content {
		flex: 1 1;
	}

	.semi-divider-vertical {
		border-bottom: 0;
		border-left: 1px solid rgba(56, 55, 67, 0.08) !important;
		display: inline-block;
		height: 20px;
		margin: 0 1px 0 1px;
		vertical-align: middle;
	}

	.semi-divider {
		border-bottom: 1px solid rgba(28, 29, 35, 0.12) !important;
		box-sizing: border-box;
		color: rgba(28, 29, 35, 0.12);
		margin: 1px 4px 1px 4px;
	}

	div.custom-collapse {
		border: none !important;
	}
</style>
